<style lang="less" scoped>
    .main {
        background: #fff;
        padding: 0 0.38rem;

        input {
            width: 100%;
            background: transparent;
            font-size: 0.37rem;
            color: #333;
            height: 1rem;

            &:first-child {
                border-bottom: 1px solid #dbdbdb;
            }

        }
    }
    .text_t{
        font-size: 0.26rem;
        color: #63676A;
        margin: 0.3rem 0 0.24rem 0.24rem;
    }
    .on_b{
        margin-top: .7rem;
        padding-bottom: .2rem;
        button{
            padding: 0;
            height:0.8rem;
        }
    }
    .alltext{
        flex: 1;
        display: block;
        margin-top: 0.3rem;
        font-size: 0.24rem;
        color: #666666;
        line-height: 1.5;
    }
    .tip{
        padding-left: 0.24rem;
    }
</style>
<template>
    <div>
        <v-header title="实名认证">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <div class="main" style="margin-top: 0.16rem;">
                <input type="text" :placeholder="user.name?user.name:'真实姓名'" :disabled="user.authentication == 1" :value="user.name" v-on:input="nameOnChange">
                <input type="text" :maxlength="18" :placeholder="user.idCardNo?user.idCardNo:'身份证号'"  :disabled="user.authentication == 1" :value="user.idCardNo" v-on:input="idCardNoOnChange">
            </div>
            <p class="text_t">请上传身份证照:</p>
            <ul class="uploadImage">
                <li v-on:click="pushImg('idCardImgFront')">
                    <div v-if="idCardImgFront.imageUrl" class="box_s">
                        <img v-lazy="{src: idCardImgFront.prefix +  idCardImgFront.imageUrl,loading:photographLoadImg,error:photographLoadImg}" alt="">
                        <div class="img_b">重新上传</div>
                    </div>
                    <div class="box" v-on:click="" v-else>
                        <div class="camera_s_icon"></div>
                        <span class="text">上传身份证正面照</span>
                    </div>
                </li>
                <li v-on:click="pushImg('idCardImgBack')" >
                    <div v-if="idCardImgBack.imageUrl" class="box_s">
                        <img v-lazy="{src: idCardImgBack.prefix + idCardImgBack.imageUrl }"  alt="">
                        <div class="img_b">重新上传</div>
                    </div>
                    <div class="box" v-else>
                        <div class="camera_s_icon"></div>
                        <span class="text">上传身份证背面照</span>
                    </div>
                </li>
            </ul>
            <!--<p class="text_t">请上传手持本人身份证正面照:</p>
            <ul class="uploadImage">
                <li v-on:click="pushImg('idCardImgHold')">
                    <div v-if="idCardImgHold.imageUrl" class="box_s">
                        <img v-lazy="{src: idCardImgHold.prefix + idCardImgHold.imageUrl }" alt="">
                        <div class="img_b">重新上传</div>
                    </div>
                    <div v-else class="box">
                        <div class="camera_s_icon"></div>
                        <span class="text">上传手持身份证正面照</span>
                    </div>
                </li>
            </ul>-->
            <div class="tip">
                <div class="warning_icon" style="margin-top: -.44rem;"></div>
                <span class="alltext">要求：<br/>请填写您的真实信息，通过后不能修改。<br/>证件文字清晰，建议使用原图。<!-- <br>手持身份证正面照：负责人手持身份证拍照，五官可见；证件文字清晰，建议使用原图。--></span>
            </div>
            <div class="on_b">
                <!--:disabled="disabled !== ''"-->  <!--v-on:click="domclick ?submit():sava()"-->
                <button class="btns buttonBR" v-on:click="sava">
                    <span v-if="user.authentication ==1">认证成功</span>
                    <span v-else>认证</span>
                    <!--<span v-else>保存</span>-->
                </button>
            </div>
        </div>
    </div>
</template>
<script>
    import {AlertModule } from 'vux'
    import { mapActions,mapState } from 'vuex'
    import { ISVERIFIED } from 'store/user'
    import {UPDATA_INTERACTIVE} from 'store/interactive'
    export default {
        components: {
            AlertModule
        },
        data() {
            return {
                disabled: "disabled",
                ImgClick:'',
                idCardImgFront:{imageUrl:''},
                idCardImgBack:{imageUrl:''},
                idCardImgHold:{imageUrl:''},
                photographLoadImg:require('../../assets/img/photograph_loadImg.png'),
                domclick:false

            };
        },
        activated:function () {
            this.init();
        },
        methods: {
            ...mapActions([ISVERIFIED,UPDATA_INTERACTIVE]),
            init(){
                this.domclick = false
                this.idCardImgFront={imageUrl:''};
                this.idCardImgBack={imageUrl:''};
                this.idCardImgHold={imageUrl:''};
                /*if(this.user.idCardImgFront !== null ){
                    this.idCardImgFront=this.user.idCardImgFront;
                }else{
                    this.idCardImgFront={imageUrl:''};
                }
                if(this.user.idCardImgBack !== null ){
                    this.idCardImgBack=this.user.idCardImgBack;
                }else{
                    this.idCardImgBack={imageUrl:''};
                }
                if(this.user.idCardImgHold !== null ){
                    this.idCardImgHold=this.user.idCardImgHold;
                }else{
                    this.idCardImgHold={imageUrl:''};
                }*/
            },
            pushImg(data){
                if(this.domclick || this.user.authentication==1){
                    return;
                }
                this.ImgClick = data;
                this.Interactive.uploadPictures("1");
            },
            pushImgSucc(){
                    this.UPDATA_INTERACTIVE({url:''})
            },
            nameOnChange(e){
                this.ISVERIFIED({type:'name',str:e.target.value});
                this.reduction();
            },
            idCardNoOnChange(e){
                this.ISVERIFIED({type:'idCardNo',str:e.target.value});
                this.reduction();
            },

            submit() {
                this.authIdentityInfos();
            },
            sava(){  //保存
                let that = this;
                if(!this.user.name.trim() || this.user.name.trim() == null){
                    this.$vux.toast.text('请输入真实姓名','middle');
                    return;
                }
                if(!this.user.idCardNo.trim() || this.user.idCardNo.trim() == null){
                    this.$vux.toast.text('请输入身份证号','middle');
                    return;
                }
                if(!this.comJS.checkIdNumber(this.user.idCardNo.trim())){
                    this.$vux.toast.text('请输入正确的身份证号','middle');
                    return;
                }
                if(!this.comJS.pushImg(this.idCardImgFront)){
                    this.$vux.toast.text('请上传身份证正面照','middle');
                    return;
                }
                if(!this.comJS.pushImg(this.idCardImgBack)){
                    this.$vux.toast.text('请上传身份证背面照','middle');
                    return;
                }
                /*if(!this.comJS.pushImg(this.idCardImgHold)){
                    this.$vux.toast.text('请上传手持身份证正面照','middle');
                    return;
                }*/

                let data = {name:this.user.name.trim(),idCardNo:this.user.idCardNo.trim(),idCardImgFront:this.comJS.pushImg(this.idCardImgFront),idCardImgBack:this.comJS.pushImg(this.idCardImgBack),idCardImgHold:this.comJS.pushImg(this.idCardImgHold)};
                this.$ajax.inFo.savePersonalInformation(data)
                    .then((res)=>{
                        let gender = this.user.idCardNo.substr(this.user.idCardNo.length-2,1);
                        if(gender%2){
                            that.ISVERIFIED({type:'gender',str:1});
                        }else{
                            that.ISVERIFIED({type:'gender',str:2});
                        }
                        let birthday = this.user.idCardNo.slice(6,14);
                        let str = "";
                        for(let i = 0;i< birthday.length;i++){
                            let obj = birthday[i];
                            str += obj;
                            if(i==3){
                                str += "年"
                            }
                            if(i==5){
                                str += "月"
                            }
                            if(i==birthday.length-1){
                                str += "日"
                            }
                        }
                        that.ISVERIFIED({type:'birthday',str:str});
                        that.domclick = true
                       /* AlertModule.show({
                            title: '提示',
                            content: '已保存',
                            onShow () {
                            },
                            onHide () {
                            }
                        })*/

                    })
                    .then(() => this.submit())  //  保存完成直接认证
            },
            authIdentityInfos(){
                let that = this;
                var data = {name:this.user.name.trim(),idCardNo:this.user.idCardNo.trim(),idCardImgFront:this.comJS.pushImg(this.idCardImgFront),idCardImgBack:this.comJS.pushImg(this.idCardImgBack),idCardImgHold:this.comJS.pushImg(this.idCardImgHold)}
                this.$ajax.inFo.authIdentityInfo(data)
                    .then((res)=>{
                        if(res.body.content){
                            if(that.$route.query.type == 1){
                                that.$router.replace({ path: '/my/verifiedStatus',query:{
                                        goUrl:"",
                                        type:0,
                                        title:'认证成功',
                                        text:'认证成功',
                                        backUrl:'',
                                        from: ''
                                  }});
                            }else{
                                that.$router.replace({ path: '/my/verifiedStatus',query:{
                                        goUrl:"/my",
                                        type:0,
                                        title:'认证成功',
                                        text:'认证成功',
                                        backUrl:'',
                                        from: 'App'
                                  }});
                            }
                            that.ISVERIFIED({type:'authentication',str:1});

                        }else{
                            that.domclick = false
                            that.$vux.toast.text('认证失败', 'middle');
                        }


                    },(error)=>{
                        console.log(error)
                    })
            },
            reduction(){
                if (this.user.idCardNo && this.user.idCardNo!== null && this.user.name && this.user.name!== null && this.idCardImgFront.imageUrl && this.idCardImgFront !== null && this.idCardImgBack.imageUrl &&this.idCardImgBack !== null && this.idCardImgHold.imageUrl && this.idCardImgHold !== null && this.comJS.checkIdNumber(this.user.idCardNo)&& !this.domclick) {
                    this.disabled = "";
                    this.ISVERIFIED({type:'authentication',str:0});
                } else {
                    this.disabled = "disabled"
                }
            }
        },
        watch:{
            "interactive.image":function () {
                if(this.interactive.image.url){
                    let str = '';
                     str = this.interactive.image.url;
                     this[this.ImgClick] = str;
                    // this.ISVERIFIED({type:this.ImgClick,str:str});
                    this.pushImgSucc();
                    this.reduction();
                };
            }
        },
        computed: mapState({user:state=>state.user,interactive:state => state.interactive}),


    }
</script>